<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
    div {
        width: 100px;
        height: 100px;
        background-color: pink;
    }
</style>
<body>

<div>123</div>

<script>

    // 事件对象
    var div = document.querySelector('div');
    // div.onclick = function (event) {
    //
    //     console.log(event);
    // }

    div.addEventListener('click', function (e) {
        // 兼容性问题解决!!!
        e = e || window.event;
        console.log(e);
        // 1.event就是一个事件对象 写到我们侦听函数的小括号里面, 当形参来看
        // 2.事件对象只有有了事件才会存在, 它是系统给我们自动创建的, 不需要我们传递参数
        // 3.事件对象 是 我们事件的一些列相关数据的集合
        //      跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息, 鼠标坐标
        //                  如果是键盘事件里面就包含了键盘事件的信息, 比如判断用户按下了哪个键
        // 4.这个事件对象我们可以自己命名 如event、evt、e
        // 5.事件对象也有兼容性问题 ie678 通过window.event 兼容性的写法 e = e || window.event
    })

</script>
</body>
</html>
